<template>
  <div class="block" style="font-size:14px;">
    <slot></slot>
    <el-cascader 
    v-model="myValue" 
    :options="options" 
    :placeholder="placeholder"
    :clearable="isClearable" 
    :disabled="disabled"
    @visible-change="handleChange"
    change-on-select size="small"
    filterable :style='"width:"+ width'>
    </el-cascader>
  </div>
</template>
<script>
export default {
    data() {
        return {
            myValue: []
        };
    },
    props: {
        changeEvent: {
            default: ""
        },
        value: {
            default() {
                return [];
            }
        },
        options: {
            default(){
                return []
            }
        },
        width: {
            default: ""
        },
        disabled: {
            default: false
        },
        isClearable: {
            default: true
        },
        placeholder: {
            default: "请选择"
        }
    },
    created() {},
    watch: {
        value(val) {
            if (val instanceof Array) {
                this.myValue = val;
            } else {
                this.myValue = [];
            }
        }
    },
    methods: {
        getCascaderObj(val, opt) {
            return val.map(function(value) {
                for (let item of opt) {
                    if (item.value == value) {
                        opt = item.children;
                        return item;
                    }
                }
                return null;
            });
        },
        handleChange(val) {
            if (!val) {
                // console.log(this.myValue,'myValue');
                this.$Bus.$emit(this.changeEvent, this.myValue);
            }
        }
    }
};
</script>
